import React, { useEffect, useState } from 'react'
import request from '../../api/request'
import { Grid } from 'antd-mobile'
import { NavBar, Space, Toast, Card } from 'antd-mobile'
import { useNavigate, useParams } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'
import { InfiniteScroll } from 'antd-mobile'
import styles from './index.module.css'
function List() {
  let navtion = useNavigate()

  let [list, setList] = useState([])
  let [page, setPage] = useState(1)
  const { start, end, date } = useSelector(state => state.cityle)
  const dispatch = useDispatch()

  const [hasMore, setHasMore] = useState(true)
  const getList = async () => {
    const res = await request.post('/api/trip/train', {
      start,
      end, date, page
    })
    console.log(res);
    const { code, data } = res.data
    if (code == 200) {
      setList([...list, ...data])
      setPage((par) => par + 1)
    }
    if (data.length == 0) {
      setHasMore(false)
    }
  }


  useEffect(() => {
    getList()
  }, [])


  const detil=(item)=>{
    navtion('/dateil',{state:item})
  }
  return (
    <div>
      {/* 导航栏 */}
      <NavBar onBack={() => navtion(-1)}>
        <p>北京→广州</p>
      </NavBar>

      <div>
        {
          list.length > 0 && list.map((item, index) => {
            return <div key={index} className={styles.listgard} onClick={()=>detil(item)}>
              {/* <span>{item.start}</span>
              <span>{item.end}</span>
              <span>{item.date}</span>
              <span>商务座<b>有票</b></span>
              <span>一等座<b>有票</b></span>
              <span>二等座<b>有票</b></span> */}
              <Grid columns={4} gap={8}>
                <Grid.Item>
                  <div className={styles['grid-demo-item-block']}>{item.start}</div>
                </Grid.Item>
                <Grid.Item>
                  <div className={styles['grid-demo-item-block']}>{item.end}</div>
                </Grid.Item>
                <Grid.Item>
                  <div className={styles['grid-demo-item-block']}>{item.startTime}</div>
                </Grid.Item>
                <Grid.Item>
                  <div className={styles['grid-demo-item-block']}>{item.tick.secondTick}</div>
                </Grid.Item>
                <Grid.Item>
                  <div className={styles['grid-demo-item-block']}>商务座<b>有票</b></div>
                </Grid.Item>
                <Grid.Item>
                  <div className={styles['grid-demo-item-block']}>一等座<b>有票</b></div>
                </Grid.Item>
                <Grid.Item>
                  <div className={styles['grid-demo-item-block']}>二等座<b>有票</b></div>
                </Grid.Item>
              </Grid>
            </div>
          })
        }
        <InfiniteScroll loadMore={getList} hasMore={hasMore} />
      </div>

    </div>
  )
}

export default List
